<template>
  <div class="">
    <el-card style="max-width: 100%">
      <div class="btn">
        <el-upload
          class="avatar-uploader"
          action="http://10.200.26.30:4000/admin/uploadpicture"
          :show-file-list="false"
          name="picture"
          :data="{ type: props.type }"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          multiple
        >
          <el-button type="primary" size="large">单击上传</el-button>
        </el-upload>
        <div v-if="!$route.query.checked">
          <el-button
            type="primary"
            size="large"
            v-if="!isEditStatus"
            @click="editpicture"
            >编辑</el-button
          >
          <el-button
            type="danger"
            size="large"
            v-if="isEditStatus"
            @click="delpicture(checkedimgInfo.id)"
            >删除</el-button
          >
          <el-button
            type="primary"
            size="large"
            v-if="isEditStatus"
            @click="cancelEdit"
            >取消</el-button
          >
        </div>
        <el-button
          type="primary"
          size="large"
          v-if="$route.query.checked"
          @click="confirmChecked"
          >确定</el-button
        >
      </div>
      <div class="bigbox">
        <div
          class="box"
          v-for="picture in pictures"
          :key="picture.id"
          @click="checkedPicture(picture)"
        >
          <img
            :src="URL + '/' + picture.img"
            style="width: 100px; height: 100px"
          />
          <!-- 选中 -->
          <div
            class="overspread"
            v-if="isEditStatus && picture.id == checkedimgInfo.id"
          >
            <el-icon><Check /></el-icon>
          </div>
        </div>
      </div>
    </el-card>

    <el-pagination
      small
      background
      layout="prev, pager, next"
      :total="total"
      class="mt-4"
      :page-size="pageSize"
      @change="changePage"
      style="display: flex; justify-content: center"
    />
  </div>
</template>

<script setup lang="ts">
const URL = import.meta.env.VITE_APP_API_URL;
const props = defineProps(["type"]);
import { reqGetPicture, reqDelPicture } from "@/api/picture/index";
import { reqGetPictureData } from "@/api/picture/model";
import { UploadProps } from "element-plus";
import { useRoute, useRouter } from "vue-router";
const $router = useRouter();
const $route = useRoute();
const isEditStatus = ref<boolean>(false);
const checkedimgInfo = ref({ id: 0, img: "" });
const type = props.type;
const total = ref<number>(0);
const pictures = ref<reqGetPictureData[]>([]);
const page = ref<number>(1);
const pageSize = ref<number>(36);

// 选中图片
const checkedPicture = (picture: any) => {
  checkedimgInfo.value = picture;
};

// 编辑图片
const editpicture = () => {
  isEditStatus.value = true;
  checkedimgInfo.value = { id: 0, img: "" };
};

// 取消编辑
const cancelEdit = () => {
  isEditStatus.value = false;
};
const confirmChecked = () => {};

// 切换页码
const changePage = (pageNum: number) => {
  page.value = pageNum;
  getPicture();
};

// 图片上传成功后
const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  getPicture();
};

// 图片上传前
const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  if (rawFile.type !== "image/jpeg") {
    ElMessage.error("Avatar picture must be JPG format!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("Avatar picture size can not exceed 2MB!");
    return false;
  }
  return true;
};

const delpicture = async (id: number) => {
  console.log(id);
  if (id) {
    await reqDelPicture(id);
    ElMessage({
      message: "删除成功",
      type: "success",
    });
    getPicture();
  }
};

const getPicture = async () => {
  let result = await reqGetPicture({
    type: type,
    page: page.value,
    pageSize: pageSize.value,
  });
  total.value = result.count;
  pictures.value = result.rows;
};
onMounted(() => {
  getPicture();
});
</script>

<style scoped lang="scss">
.bigbox {
  display: flex;
  flex-wrap: wrap;

  .box {
    position: relative;
    margin: 10px 15px;

    .del {
      position: absolute;
      top: -8px;
      right: -8px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      cursor: pointer;
      background-color: black;
      border-radius: 50%;

      span {
        color: white;
      }
    }

    .overspread {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      color: #fff;
      background: rgb(0 0 0 / 40%);
    }
  }
}

.btn {
  display: flex;
  justify-content: space-between;
  width: 92%;
}
</style>
